<template>
  <el-drawer
    title="选择预算模板"
    v-model="_isOpen"
    :direction="'rtl'"
    modal-class="import-temp-drawer"
    :before-close="handleClose"
  >
    <div v-loading="loading" class="drawer-content">
      <el-input
        v-model="templateName"
        clearable
        style="width: 314px"
        placeholder="请输入模板名称"
        :prefix-icon="Search"
        @change="getTemplateList"
      />
      <div class="temp-drawer-list">
        <template v-if="templateList?.length > 0">
          <div
            class="temp-drawer-item"
            :class="{ active: currTemp.templateId === item.templateId }"
            v-for="(item, index) in templateList"
            :key="index"
            @click="currTemp = item"
          >
            <header>
              <p class="jzt-flex-start">
                <b>{{ item.budgetName || "-" }}</b>
                <span>（包含空间{{ item.spaceList?.length }}个）</span>
                <img class="mr10" v-if="item.softDecorationStatus === 1" src="@/assets/images/ruanzhuang.png" width="36" alt="" />
                {{
                  `合同类型：${contractTypeList.find(temp => item.contractType === temp.contractTypeId)?.contractTypeName || "-"}`
                }}
              </p>
            </header>
            <div class="block-wrap">
              <template v-if="item?.spaceList?.length > 0">
                <p class="block-item" v-for="(item2, index2) in item.spaceList" :key="index2">{{ item2.spaceName || "-" }}</p>
              </template>
              <p class="pt14" v-else>无</p>
            </div>
            <i class="package-icon" v-if="item.budgetType === 2">套餐</i>
          </div>
        </template>
        <el-empty v-else description="暂无数据" />
      </div>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button type="info" @click="_isOpen = false">取消</el-button>
        <el-button type="primary" :disabled="!currTemp.templateId" @click="confirmImport">确认导入</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup>
import { computed, ref } from "vue";
import { chooseTemplate, importBudgetQuotation, getContractTypeList } from "@/apis/quote-price/following";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  ysId: { type: String, default: "" }
});

const emits = defineEmits(["update:modelValue", "success"]);

const _isOpen = computed({
  get: () => props.modelValue,
  set: newVal => emits("update:modelValue", newVal)
});

const currTemp = ref({});
const templateList = ref([]);
const templateName = ref("");
const loading = ref(false);
const contractTypeList = ref([]);

const getContractType = async () => {
  const { code, data } = await getContractTypeList();
  code === 200 && (contractTypeList.value = data);
};

const getTemplateList = async templateName => {
  loading.value = true;
  const { code, data } = await chooseTemplate({ templateName });
  code === 200 && (templateList.value = data);
  data.length > 0 && (currTemp.value = data[0]);
  loading.value = false;
};

const confirmImport = async () => {
  loading.value = true;
  const { code } = await importBudgetQuotation({
    templateId: currTemp.value.templateId,
    budgetId: currTemp.value.budgetId,
    ysId: props.ysId
  });
  if (code === 200) {
    ElMessage({ message: "模板导入成功", type: "success" });
    emits("success", true);
    _isOpen.value = false;
  }
  loading.value = false;
};

(async () => {
  await getContractType();
  await getTemplateList("");
})();
</script>
<style lang="scss">
.import-temp-drawer.el-overlay {
  .el-drawer {
    width: 710px !important;
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }
  .el-drawer__header {
    border: 1px solid #dcdfe6;
    margin-bottom: 0;
    padding-bottom: 24px;
    color: #131414;
    font-size: 18px;
  }
  .el-drawer__footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    padding: 14px 20px;
    .el-button--primary {
      background-color: #424e66;
      border: none;
    }
    .el-button--info {
      background-color: #f2f3f5;
      color: #1d2129;
      border: none;
    }
  }
}
.drawer-content {
  .temp-drawer-list {
    .temp-drawer-item {
      margin-top: 20px;
      border: 1px solid #e1e6ed;
      border-radius: 8px 8px 8px 8px;
      cursor: pointer;
      position: relative;
      &.active {
        background-color: #424e66;
        box-shadow: 0px 0px 10px 0px rgba(134, 144, 156, 0.1);
        border-color: transparent;
        header p {
          color: white;
        }
      }
      header {
        padding: 10px 20px;
        border-bottom: 1px solid #e1e6ed;
        p {
          color: #3d3d3d;
          span {
            color: #86909c;
          }
        }
      }
      .block-wrap {
        padding: 0 20px 14px 20px;
        display: flex;
        flex-wrap: wrap;
        .block-item {
          margin: 14px 10px 0 0;
          background-color: #e1e6ed;
          border-radius: 4px;
          color: #4e5969;
          padding: 8px 20px;
        }
      }
      .package-icon {
        position: absolute;
        right: -1px;
        top: -1px;
        background-color: #ffc86a;
        border-radius: 0 10px 0 10px;
        line-height: 24px;
        padding: 0 14px;
        font-size: 12px;
        font-style: normal;
        color: #3d3d3d;
      }
    }
  }
}
</style>
